<template>
  <div class="alert-box">
    <div style="margin-top: 8px">
      {{ stateData.value }}
    </div>
    <el-steps :active="stateData.status - 1" simple style="margin-top: 20px">
      <el-step title="振动正常"></el-step>
      <el-step title="轻微振动"></el-step>
      <el-step title="中等振动"></el-step>
      <el-step title="剧烈振动"></el-step>
    </el-steps>
    <el-card class="box-card">
      <div class="card-item">
        <span>电机振动传感器</span>
        <span>8520</span>
        <span>IW 616</span>
        <button
          class="flashing-button"
          :style="{
            backgroundColor: statesBackground[stateData.status - 1],
            color: statesColor[stateData.status - 1],
          }"
        >
          {{ statesText[stateData.status - 1] }}
        </button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { immsShakeGet } from "@/api/home/main";
/**
 * 1 绿色
 * 2 黄色
 * 3 橙色
 * 4 红色
 */
export default {
  data() {
    return {
      stateData: {
        status: "", // 2
        value: "", // 3.26mm/s
      },
      statesBackground: ["green", "yellow", "orange", "red"],
      statesColor: ["white", "black", "black", "white"],
      statesText: ["振动正常", "轻微振动", "中等振动", "剧烈振动"],
    };
  },
  async mounted() {
    let res = await immsShakeGet();
    if (res.code == "200") this.stateData = res.data;
  },
  methods: {},
};
</script>
<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.alert-box {
  text-align: center;
}

.box-card {
  margin-top: 16px;
  width: 100%;
  margin-bottom: 10px;
  .card-item {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
}
.flashing-button {
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  // background-color: #4caf50;
  // color: white;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.7;
  }
}
// ::v-deep .el-step__title.is-process {
//   color: white !important;
//   border-color: white;
// }
// ::v-deep .el-step__title.is-wait {
//   color: rgb(241, 234, 234);
// }
</style>
